<template>
  <view class="reports-box">
    <uv-sticky >
      <uv-subsection
        :list="list"
        :current="subsectionCurrent"
        activeColor="#fff"
        inactiveColor="#000"
        @change="subsectionChange"
        bgColor="#ddecff"
        :customItemStyle="{
          backgroundColor: '#98C7F9',
          borderRadius: '18rpx',
        }"
      ></uv-subsection>
    </uv-sticky>

    <view class="reports-content">
      <InStockReports v-if="subsectionCurrent === 0" />
      <OutStockReports v-if="subsectionCurrent === 1" />
    </view>
  </view>
</template>

<script setup>
// **直接静态引入组件**
import InStockReports from "@/components/ReportsComponents/InStockReports/index.vue";
import OutStockReports from "@/components/ReportsComponents/OutStockReports/index.vue";
import { ref } from "vue";

const list = ref(["入库单报表", "出库单报表"]);
const subsectionCurrent = ref(0);

const subsectionChange = (e) => {
  subsectionCurrent.value = e;
};
</script>

<style lang="less" scoped>
.reports-box {
  min-height: 100vh;
}
.reports-content{
}
</style>
